import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Copy, 
  Play, 
  Download, 
  Share2,
  Check,
  Code2,
  FileText
} from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { DesignPattern } from '@/types';

interface CodeTabProps {
  pattern: DesignPattern;
  onCopy: () => void;
  isCopied: boolean;
}

const CodeTab: React.FC<CodeTabProps> = ({ pattern, onCopy, isCopied }) => {
  const [activeCode, setActiveCode] = useState<'main' | 'demo'>('main');

  const codeOptions = [
    { id: 'main', label: '完整实现', code: pattern.code },
    { id: 'demo', label: '演示代码', code: pattern.demoCode || pattern.code }
  ];

  return (
    <div className="h-full flex flex-col bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Code2 className="w-5 h-5 text-primary-600" />
              <h2 className="text-lg font-semibold text-gray-900">TypeScript 实现</h2>
            </div>
            
            {/* Code Tabs */}
            <div className="flex space-x-1 bg-gray-100 rounded-lg p-1">
              {codeOptions.map((option) => (
                <button
                  key={option.id}
                  onClick={() => setActiveCode(option.id as 'main' | 'demo')}
                  className={`px-3 py-1 text-sm font-medium rounded-md transition-all duration-200 ${
                    activeCode === option.id
                      ? 'bg-white text-primary-600 shadow-sm'
                      : 'text-gray-600 hover:text-gray-900'
                  }`}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>
          
          {/* Actions */}
          <div className="flex items-center space-x-2">
            <motion.button
              onClick={onCopy}
              className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {isCopied ? (
                <>
                  <Check className="w-4 h-4 text-green-600" />
                  <span>已复制</span>
                </>
              ) : (
                <>
                  <Copy className="w-4 h-4" />
                  <span>复制代码</span>
                </>
              )}
            </motion.button>
            
            <motion.button
              className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Play className="w-4 h-4" />
              <span>运行代码</span>
            </motion.button>
            
            <motion.button
              className="p-2 text-gray-600 hover:text-gray-900 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              title="下载代码"
            >
              <Download className="w-4 h-4" />
            </motion.button>
            
            <motion.button
              className="p-2 text-gray-600 hover:text-gray-900 transition-colors"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              title="分享代码"
            >
              <Share2 className="w-4 h-4" />
            </motion.button>
          </div>
        </div>
      </div>

      {/* Code Content */}
      <div className="flex-1 overflow-hidden">
        <motion.div
          key={activeCode}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="h-full"
        >
          <div className="min-h-full">
            <SyntaxHighlighter
              language="typescript"
              style={tomorrow}
              customStyle={{
                margin: 0,
                padding: '1.5rem',
                fontSize: '14px',
                lineHeight: '1.6',
                background: '#2d3748',
                borderRadius: 0
              }}
              showLineNumbers
              wrapLines
              wrapLongLines
            >
              {codeOptions.find(option => option.id === activeCode)?.code || ''}
            </SyntaxHighlighter>
          </div>
        </motion.div>
      </div>

      {/* Footer Info */}
      <div className="bg-white border-t border-gray-200 p-4">
        <div className="flex items-center justify-between text-sm text-gray-600">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <FileText className="w-4 h-4" />
              <span>TypeScript</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span>语法高亮</span>
            </div>
          </div>
          
          <div className="flex items-center space-x-4">
            <span>行数: {codeOptions.find(option => option.id === activeCode)?.code.split('\n').length || 0}</span>
            <span>字符: {codeOptions.find(option => option.id === activeCode)?.code.length || 0}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CodeTab;
